<template>
    <el-row>
      <!-- 一个el-row一共有24列，el-col的值span 加offset 不能超24  换行 -->
      <el-col :span="2" :offset="1">
        <!-- 将其设计为一个计算属性 -->
        <el-checkbox v-model="isCheck"></el-checkbox
      ></el-col>
      <el-col :span="6" :offset="2">{{ item.title }}</el-col>
      <el-col :span="3" :offset="5">
        <el-button type="danger" @click="delItem">删除</el-button>
      </el-col>
    </el-row>
  </template>
  
  <script lang="ts">
  import { computed, defineComponent } from "vue";
  
  export default defineComponent({
    props: ["item", "del", "index", "changeFlag"],
    setup(props) {
      const delItem = () => {
        // 触发删除即可，删除需要传参 参数是index
        // console.log(props);
        props.del(props.index);
      };
      // 将多选框的值设计成为一个计算属性
      // props传递过来的值不能进行更能改 称为单向数据流
  
      const isCheck = computed({
        get() {
          // 获取的值  获取的值就是传递过来的item.flag
          return props.item.flag;
        },
        // 当计算属性的值已更改就会触发set set劫持，再做操作
        set(value) {
          console.log(value);
          // 将todoList 当中对应该项的todo对象中的flag改为true
          // 劫持之后要更新todoList当中对应的值{}中的flag的值
          // 造一个方法更改它的值
          props.changeFlag(props.item, value);
        },
      });
  
      return {
        delItem,
        isCheck,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>